<template>
  <div id="printTest">
    <div>
      <el-row class="top_row">
        <el-col :span="24">
          <div class="top_title">
            <div class="left_add">
              <el-button type="primary" size="mini" icon="el-icon-printer" v-print="'#printTest'">打印</el-button>
              <el-button
                type="primary"
                @click="dialogFormVisible = true"
                size="mini"
                icon="el-icon-search"
                plain
                v-show="false"
              >高级搜索</el-button>
            </div>
            <div class="right_sel">
              <el-input size="mini" v-model="SelName" placeholder="查找...">
                <el-button slot="append" @click="SelDt" icon="el-icon-search" style="width:50px;"></el-button>
              </el-input>
            </div>
          </div>
        </el-col>
      </el-row>   
      <el-dialog title :visible.sync="dialogFormVisible">
        <el-form>
        <el-row gutter="80">
          <el-col :span="11">
            <div class="grid-content bg-purple">部门</div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">角色</div>
          </el-col>
        </el-row>
        <el-row gutter="80">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-select v-model="value" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in option1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-select v-model="value" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in option2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row gutter="80">
          <el-col :span="11">
            <div class="grid-content bg-purple">姓名</div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">用户名</div>
          </el-col>
        </el-row>
        <el-row gutter="80">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-input v-model="input15" placeholder="请输入内容" size="medium" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-input v-model="input16" placeholder="请输入内容" size="medium" clearable></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row gutter="80">
          <el-col :span="11">
            <div class="grid-content bg-purple">联系电话</div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">身份证号</div>
          </el-col>
        </el-row>
        <el-row gutter="80">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-input v-model="input15" placeholder="请输入内容" size="medium" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-input v-model="input16" placeholder="请输入内容" size="medium" clearable></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row gutter="80">
          <el-col :span="11">
            <div class="grid-content bg-purple">更新起</div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">更新止</div>
          </el-col>
        </el-row>
        <el-row gutter="80">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </div>
          </el-col>
        </el-row>
        <!--高级搜索脚部-->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
        <!--高级搜索结束-->
      </el-form>
      </el-dialog>
    </div>
    <el-table :data="OnLineList" style="width: 100%" max-height="500px">
      <el-table-column prop="item.ImagePath1" width="100">
       <template slot-scope="scope">
          <!-- 'data:image/jpeg;base64,' -->
           <el-avatar :size="50" :src="'data:image/jpeg;base64,'+scope.row.ImgDt"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="item.FullName" label="姓名" width="120"></el-table-column>
      <el-table-column prop="item.DepartmentName" label="部门" width="180"></el-table-column>
      <el-table-column prop="item.UserName" label="用户名" width="190"></el-table-column>
      <el-table-column prop="item.Title" label="角色" width="180"></el-table-column>
      <el-table-column prop="item.Phone1" label="电话"></el-table-column>
      <el-table-column prop="item.Remark" label="状态" width="190">
        <template slot-scope="scope">
              <span v-html="scope.row.item.Remark"></span>
        </template>
      </el-table-column>
      <el-table-column prop="item.LastLoginTime" label="最后更新" width="200">
        <template slot-scope="scope">
          {{scope.row.item.LastLoginTime|TimeFilter}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.top_row {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 10px;
  .top_title {
    .left_add {
      float: left;
    }
    .right_sel {
      float: right;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      OnLineList: [],
      dialogFormVisible: false,
      value1: "",
      value2: "",
      SelName:""
    }
  },
  mounted() {
    this.SelDt();

  },
  methods:{
    SelDt(){
      this.$axios({
      url: "/HrApi/OnLine/GetOnLineList",
      method: "GET",
      params: {
        SelName:this.SelName
      },
    }).then((res) => {
      if (!res.data.code) {
        this.OnLineList = res.data.data;
      } else {
        this.$message.error(res.data.msg);
      }
    })
    }
  },
  filters:{
    //时间过滤器
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt;
    }
  }
};
</script>